<!-- author: xuett -->
<!-- date: 2025-03-14 17:09:35 -->
<!-- description: 头部tab栏 -->
<template>
  <div class="header-box">
    <div class="header-left">
      <!-- 省份下拉选择 -->
      <el-dropdown class="province-select">
        <div class="province-select-title">
          {{ activeProvince.name }}
          <el-icon class="expand-icon"><ArrowDownBold /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="province in provinceList" :key="province.id" @click="selectProvince(province)"> {{ province.name }} </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <el-tabs v-model="activeTab" class="header-tab" @tab-click="changeTab">
      <el-tab-pane :label="item.name" :name="item.id" v-for="item in tabList" :key="item.id"></el-tab-pane>
    </el-tabs>
    <!-- 用户头像名称 -->
    <div class="header-right">
      <el-avatar class="user-avatar" :size="30" src="">
        <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
      </el-avatar>
      {{ userInfo.name }}
    </div>
  </div>
</template>

<script setup>
import api from "@/service/container";

const $emit = defineEmits(["updateList"]);
const $route = useRoute();

const state = reactive({
  provinceList: [],
  activeProvince: {
    name: "省份"
  },
  activeTab: null,
  tabList: [],
  userInfo: {
    name: "管理员"
  }
});
const { provinceList, activeProvince, activeTab, tabList, userInfo } = toRefs(state);

onMounted(() => {
  getProvince();
});

//获取省份列表
const getProvince = () => {
  api.getProvince({ menuId: $route.query.menuId }).then((res) => {
    if (Array.isArray(res.data) && res.data.length) {
      state.provinceList = res.data;
      state.activeProvince = state.provinceList[0];
      getMenuTab();
    } else {
      state.activeProvince = {
        name: "省份"
      };
      state.tabList = [];
    }
  });
};

//选择省份
const selectProvince = (val) => {
  if (val.id != state.activeProvince.id) {
    state.activeProvince = val;
    getMenuTab();
  }
};

//获取菜单tab
const getMenuTab = () => {
  api.getMenuTab({ provinceId: state.activeProvince.id }).then((res) => {
    if (Array.isArray(res.data) && res.data.length) {
      state.tabList = res.data;
      state.activeTab = state.tabList[0].id;
    } else {
      state.tabList = [];
      state.activeTab = null;
    }
    $emit("updateList", state.activeTab);
  });
};
//切换tab
const changeTab = (val) => {
  $emit("updateList", state.activeTab);
};
</script>

<style scoped lang="scss">
.header-box {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: 0 30px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  user-select: none;
  .header-left {
    height: 16px;
    .province-select {
      display: flex;
      align-items: center;
      font-family: Alibaba PuHuiTi-Regular;
      font-size: 14px;
      color: #000000;
      line-height: 16px;
      cursor: pointer;
      user-select: none;
      :deep(.el-tooltip__trigger) {
        outline: none;
        border: none;
      }
      .province-select-title {
        display: flex;
        align-items: center;
      }
      .expand-icon {
        margin-left: 5px;
      }
    }
  }

  .header-tab {
    // height: 39px;
    // :deep(.el-tabs__header) {
    //   margin: 0;
    // }
    margin-top: 13px;
    :deep(.el-tabs__nav-wrap:after) {
      display: none;
    }
    :deep(.el-tabs__item) {
      height: 57px;
      font-family: Alibaba PuHuiTi-Regular;
      font-size: 14px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    font-family: Alibaba PuHuiTi-Regular;
    font-size: 14px;
    color: #000;
    .user-avatar {
      margin-right: 14px;
    }
  }
}
</style>
